@import "./../modules/common";

body,html{
  width:100%;
  height:100%;
  box-sizing: border-box;
  background: #f5f5f5;
  .wrap {
    width: 100%;
    height: 100%;
    h1 {
      width: 100%;
      height: 65px;
      line-height: 55px;
      font-family: MicrosoftYaHei;
      font-size: 20px;
      font-weight: normal;
      color: #2a3137;
    }
    .deparmentDetail {
      width: 100%;
      height: auto;
      background-color: #ffffff;
      box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
      padding-right: 15px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .baseInformation, .bindInfo {
        label {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          font-weight: normal;
          line-height: 30px;
          color: #999999;
        }
        input {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          font-weight: normal;
          color: #333333;
          line-height: 30px;
        }
      }
      .baseInformation {
        width: 100%;
        height: 207px;
        padding: 0px 0px 25px 19px;
        box-sizing: border-box;
        position: relative;
        //border-bottom:#e6e6e6 solid 1px;
        &:after {
          content: '';
          height: 1px;
          width: 96%;
          background: #e6e6e6;
          position: absolute;
          top: 207px;
          left: 2%;
        }
        .information {
          width: 65%;
          float: left;
          height: 130px;
          box-sizing: border-box;
          padding-left: 4%;
          position: relative;
          &:after {
            content: '';
            height: 140px;
            width: 1px;
            background: #e6e6e6;
            position: absolute;
            top: -33px;
            right: 0;
          }
          //border-right:#e6e6e6 solid 1px;
          .content {
            height: 130px;
            //padding-right:60px;
            .left, .right {
              width: 50%;
            }
            .left {
              float: left;
            }
            .right {
              float: right;
            }
          }

        }
        .Qrcode {
          width: 35%;
          float: right;
          height: 140px;
          position: relative;
          .box {
            width: 140px;
            height: 140px;
            margin: 0 auto;
            position: absolute;
            text-align: center;
            top: -33px;
            right: 30%;
            border: solid 1px #999999;
            img {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }

        }
      }
      .bindInfo {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding-left: 19px;
        padding-bottom: 20px;
        .WX {
          padding-left: 4%;
          width: 65%;
          height: auto;
          li {
            width: 100%;
            height: 35px;
            line-height: 35px;
            position: relative;
            .Name, .Info {
              width: 50%;
              float: left;
            }
            .delete {
              right: -50px;
              top: 3px;
              position: absolute;
              button {
                width: 100px;
                height: 29px;
                color: #ffffff;
                line-height: 29px;
                background-color: $primaryColor;
                border-radius: 5px;

              }

            }
          }

        }
      }
    }
    .lease {
      width: 100%;
      height: auto;
      padding-left: 19px;
      background-color: #ffffff;
      padding-bottom:20px;
      box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
      h2 {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        color: #666666;
        height: 46px;
        line-height: 20px;
        padding-left: 17px;
        position: relative;
        &:before {
          content: '';
          width: 6px;
          height: 25px;
          position: absolute;
          left: 0;
          top: -2px;
          background: $primaryColor;
        }
      }
      .currentLease {
        width: 100%;
        height: auto;
        margin-bottom: 29px;
        #currentLeaseTable {
          width: 100%;
          height: 58px;
          th{
            width: 18%;
            height: 32px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            color: #333333;
            text-align: center;
            &:first-child {
              width: 10%;
              text-align: left;
              padding-left: 11px;
              box-sizing: border-box;
            }
          }
          thead {
            tr {
              tr {
                th {
                  width: 18%;
                  height: 32px;
                  font-family: MicrosoftYaHei;
                  font-size: 16px;
                  font-weight: normal;
                  color: #333333;
                }

              }
            }

          }
          tbody {
            tr {
              td {
                width: 18%;
                height: 32px;
                font-family: MicrosoftYaHei;
                font-size: 16px;
                font-weight: normal;
                color: #999999;
              }
              td:first-child {
                width: 10%;
                text-align: left;
                padding-left: 11px;
                box-sizing: border-box;
              }
            }
          }
        }

      }
    }
    table.dataTable{
      margin-top:0px;
    }
    table.datatable thead tr>th{
      width:18%;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      font-weight: normal;
      line-height: 30px;
      color: #333333;
      text-align: center;
      padding:0 !important;
      &:first-child{
        width:10%;
        text-align: left;
        padding-left:11px !important;
      }
    }
  }
  .row{
    .pageNow{
      display: none;
    }
    #mytool{
      margin:0 0 20px 25px;
    }
  }

  #LeaseHistoryTable {
    tbody tr {
      height: 46px;
      text-align: center;
      border-bottom: #e6e6e6 solid 1px;
      td{
        color: #999999;
        a{
          color:#333333;
          &:hover,&:link{
            color:$primaryColor;
          }
        }
        &:first-child{
          text-align: left;
          padding-left:11px;
        }
      }
    }

  }
  .pageNum{
    //width:430px;
    margin:30px auto 0px auto;
  }
  .pagination>li>a>i{
    color: transparent;
    display: block;
    width:24px;
    height:24px;
    background: url(../../../images/next.png) no-repeat 0 0;
  }
  .pagination>.previous>a>b{
    display: block;
    width:24px;
    height:24px;
    color: transparent;
    background: url(../../../images/prev.png) no-repeat 0 0;
  }
  .pagination>.disabled>a>b{
    display: block;
    width:24px;
    height:24px;
    color: transparent;
    background: url(../../../images/prevDisabled.png) no-repeat 0 0;
  }
  .pagination>.disabled>a>i{
    display: block;
    width:24px;
    height:24px;
    color: transparent;
    background: url(../../../images/nextDisabled.png) no-repeat 0 0;
  }
  .pagination>li>a, .pagination>li>span{
    border:none;
    color:#333333;
  }


  .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    color: $primaryColor;
    cursor: default;
    background-color: #ffffff;
    border: none;
  }
}